<template>
  <div class="loginAdmin">
    <div class="login-warp">
      <div class="logo"><i class="iconfont icon-heiwushi"></i></div>
      <p class="title">后台管理系统登录</p>
      <div class="inp-box">
        <p class="inp-warp">

          <Tooltip placement="right-end"
                   content="账号由5-10数字、字母组成"
                   :always="accHit"
                   style="width:100%">
            <input type="text"
                   v-model="acc"
                   :class="{'error':accHit}"
                   placeholder="请输入您的账号"
                   class="input-item" />
            <i class="iconfont  icon-yonghu"></i>
          </Tooltip>
        </p>
        <p class="inp-warp">
          <Tooltip placement="right-end"
                   content="密码由5-10数字、字母组成"
                   :always="pwdHit"
                   style="width:100%">
            <input type="password"
                   v-model="pwd"
                   :class="{'error':pwdHit}"
                   placeholder="请输入您的密码"
                   class="input-item" />
            <i class="iconfont icon-lock "></i>
          </Tooltip>

        </p>

        <p>
          <Button type="success"
                  long
                  @click="login"
                  class="loginBtn">登录</Button>
        </p>
      </div>
    </div>
  

    <SlideCode :show="codeShow"
               @isok="codeOk" />
  </div>
</template>

<script>
import { adminLogin } from 'server/admin_k.js'

import SlideCode from 'components/common/slideCode/SlideCode'

export default {
  data() {
    return {
      acc: '',
      pwd: '',
      accHit: false,
      pwdHit: false,
      codeShow: false,
  
    }
  },
  components: {
    SlideCode
  },
  methods: {
    login() {
      const acc = this.acc
      const pwd = this.pwd
      // 检查格式
      if (!this.$rex.acc(this.acc) || !this.$rex.acc(this.pwd)) {
        return this.$Message.error('请检查输入格式后重新登录！')
      }
      this.codeShow = true
    },
    codeOk() {
      this.codeShow = false
      const acc = this.acc
      const pwd = this.pwd
      adminLogin({
        acc,
        pwd
      }).then(res => {
        if (res.err_code !== 1000) {
          return this.$Message.error(res.message)
        }
        const token = res.data.token
        window.localStorage.setItem('admin_token', token)
        this.$Message.success('登录成功！')
        this.$router.replace('/admin')
      })
    }
  },
  watch: {
    acc(v1) {
      this.accHit = !this.$rex.acc(v1)
    },
    pwd(v1) {
      this.pwdHit = !this.$rex.acc(v1)
    }
  }
}
</script>

<style scoped>
.loginAdmin {
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
}
.login-warp {
  width: 360px;
  height: 600px;
  /* border: 1px #ccc solid; */
  margin: 30px 0;
  padding: 0 40px;
}
.logo {
  text-align: center;
}
.logo i {
  font-size: 100px;
  color: #e6e6e6;
}
.title {
  color: black;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
}
.inp-box {
  margin-top: 40px;
}
.input-item {
  /* width: calc(100% - 40px); */
  width: 100%;
  height: 40px;
  border: 1px solid #d4d4d4;
  padding-left: 40px;
}

.input-item:focus {
  border-color: #c9c9c9;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
}
.loginBtn {
  height: 40px;
  border-radius: 1px;
}
.inp-warp {
  position: relative;
  height: 40px;
  margin-bottom: 20px;
}

.inp-warp .iconfont {
  display: block;
  height: 40px;
  width: 40px;
  /* border: 1px solid red; */
  left: 0;
  top: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.loginAdmin .error {
  box-shadow: 1px 0 3px rgba(221, 0, 27, 0.6);
  border-color: red;
}
</style>
